<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #calendar {
            background-color: #b1c52e;
            color: #fff;
            border-radius: 5px;
            margin: 100px auto;
        }

        #title {
            font-size: 1.4em;
            padding: 4px 0.55em;
        }

        #days th {
            font-weight: bold;
            text-align: center;
            padding: 4px 0.55em;
        }

        #calendar td {
            text-align: center;
            padding: 4px 10px;
        }

        #today {
            color: #f00;
            font-weight: bold;
        }

        .poin {
            cursor: pointer;
            cursor: hand;
        }
    </style>
    <script>
        window.onload=function(){
            var form = document.getElementById('calendar');
            // 通过日历对象去调用自身的init方法
            calendar.init(form);
        }
        var calendar = {
            year: null,
            month: null,
            //日的数组
            dayTable: null,
            //初始化函数
            init(form) {
                // 1获取日数组
                this.dayTable=form.getElementsByTagName('td');
                //2创建日历,传入当前时间
                this.createCalendar(form,new Date());
                var nextMon=form.getElementsByTagName('th')[2];
                var preMon=form.getElementsByTagName('th')[0];
                preMon.onclick=function(){
                    calendar.clearCalendar(form)
                    var preDate=new Date(calendar.year,calendar.month-1,1);
                    calendar.createCalendar(form,preDate)
                }
                nextMon.onclick=function(){
                    calendar.clearCalendar(form)
                    var nextDate=new Date(calendar.year,calendar.month+1,1);
                    calendar.createCalendar(form,nextDate)
                }
            },
            //清除日历数据
            clearCalendar(form){
                var tds=form.getElementsByTagName('td');
                for (var i = 0; i < tds.length; i++) {
                    tds[i].innerHTML='&nbsp';
                    // 清除今天的样式
                    tds[i].id='';
                }
            },
            // 3生成日历
            // from table表格  date要创建的日期
            createCalendar(form,date){
                //获取此时的年份
                this.year=date.getFullYear();
                //获取此时的月份
                this.month=date.getMonth();

                //年份月份写入日历
                form.getElementsByTagName('th')[1].innerHTML = this.year+"年"+(this.month+1)+"月";
                //获取本月的天数
                var dataNum=this.getDateLen(this.year,this.month);
                var fristDay = this.getFristDay(calendar.year,calendar.month);
                // 循环将每一天的天数写入到日历中
                // 让i表示日期。
                for (var i = 1; i <= dataNum; i++) {
                    this.dayTable[fristDay+i-1].innerHTML=i;
                    var nowDate =new Date();
                    if(i ==nowDate.getDate() && calendar.month ==nowDate.getMonth()&&calendar.year == nowDate.getFullYear()){
                        //    将当期元素的id设置为today
                        calendar.dayTable[i+fristDay-1].id = "today";
                    }
                }
            },
            // 获取本月份的天数
            getDateLen(year,month){
                //获取下个月的第一天
                var nextMonth=new Date(year,month+1,1);
                // 设置下月第一天的小时-1，也就是上个月最后一天的小时数，随便减去一个值不要超过24小时
                nextMonth.setHours(nextMonth.getHours()-1);
                //获取此时下个月的日期,就是上个月最后一天.
                return nextMonth.getDate();
            },
            // 获取本月第一天为星期几。
            getFristDay:function(year,month){
                var fristDay=new Date(year,month,1);
                return fristDay.getDay();
            }
        }
    </script>
</head>

<body>
<table id="calendar">
    <tr>
        <!-- 向左箭头 -->
        <th class="poin">&lt;&lt;</th>
        <!-- 年月 -->
        <th id="title" colspan="5"></th>
        <!-- 向右箭头 -->
        <th class="poin">&gt;&gt;</th>
    </tr>
    <tr id="days">
        <th>日</th>
        <th>一</th>

        <th>二</th>
        <th>三</th>
        <th>四</th>
        <th>五</th>
        <th>六</th>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

</body>

</html>
